<script src="../lib/jquery/jquery.js"></script>
<script>
    /*
        表格生成测试，使用数组定义一个表格，数组中每一个个都代表一列
    */

    function generateHeader(list) { //产生表头,传入表头数组
        /**
         * <tr>
                    <th>班级</t>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>电话</th>
                </tr>
         */
        var str = "";
        str += "<tr>"
        for (var i in list) {
            str += "<th>" + list[i] + "</th>"
        }
        str += "</tr>"
        return str
    }
    function ci(_text,_span){
        return {
            text:_text,
            span:_span
        }
    }
    function generateHtml(col,header){//根据传送过来的col和header生成表格
        html=""
        //step1:生成表头
        html+=header
        //step2:生成行,一个tr表示一行，其中td表示行中的每一列，顺序排列
        count=0 //计算所有列
        for(var i in col[0]){
            count+=col[0][i].span
        }
        list=new Array(count) //新建那么多个的list项
        //step3：按列输出
        for(var i in col){
            var currentRow=0
            for(var j in col[i]){
                if(typeof(list[currentRow])=="undefined")
                    list[currentRow]=[]
                list[currentRow].push(col[i][j])
                currentRow+=col[i][j].span //更新当前列
            }
        }
        //step4:生成表格
        for(var i in list){
            html+="<tr>"
            for(var j in list[i]){
                //<td rowspan="2">601班</td>
                html+="<td rowspan=\""+list[i][j].span+"\">"
                html+=list[i][j].text
                html+="</td>"
            }
            html+="</tr>"
        }
        log(list)
        log(html)
        return html
    }
    //根据数组和
    header=generateHeader(["a","b","c","d"])
    col=[]
    col[0]=[ci("1",1),ci("2",2),ci("3",1)]
    col[1]=[ci("hello",4)]
    col[2]=[ci("11",1),ci("2",1),ci("3",1),ci("4",1)]
    col[3]=[ci("1111",2),ci("2222",2)]

    t=generateHtml(col,header)
    $("#tab").html(t)
    function log(v){
        console.log(v)
    }
</script>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<div id="tab">

</div>